<template>
  <div
    class="flow-node"
    :style="nodeStyle"
    @mousedown="startDrag"
    :class="node.type"
    :data-node-id="node.id"
  >
    <!-- 标题栏 -->
    <div class="node-header">
      <!-- 输入端口 -->
      <div class="header-inputs">
        <div
          v-for="input in node.data.inputs"
          :key="input.id"
          class="port input-port"
          :data-port-id="input.id"
          @mousedown.stop="startPortDrag(input.id, true)"
          @mouseup.stop="endPortDrag(input.id, true)"
          @mouseover="handlePortMouseOver(input.id, true)"
          @mouseleave="handlePortMouseLeave"
        >
          <div class="port-dot" />
        </div>
      </div>

      <!-- 标题 -->
      <div class="node-title">{{ node.data.label }}</div>

      <!-- 输出端口 -->
      <div class="header-outputs">
        <div
          v-for="output in node.data.outputs"
          :key="output.id"
          class="port output-port"
          :data-port-id="output.id"
          @mousedown.stop="startPortDrag(output.id, false)"
          @mouseup.stop="endPortDrag(output.id, false)"
          @mouseover="handlePortMouseOver(output.id, false)"
          @mouseleave="handlePortMouseLeave"
        >
          <div class="port-dot" />
        </div>
      </div>
    </div>

    <!-- 节点内容 -->
    <div class="node-content">
      <slot name="content">
        <div class="node-default-content">
          {{ node.data.label }}
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { INode } from '../types';

defineOptions({
  name: 'FlowNode'
});

const props = defineProps<{
  node: INode;
}>();

const emit = defineEmits<{
  (e: 'nodeMove', nodeId: string, x: number, y: number): void;
  (e: 'portDragStart', nodeId: string, portId: string, isInput: boolean): void;
  (e: 'portDragEnd', nodeId: string, portId: string, isInput: boolean): void;
}>();

const nodeStyle = computed(() => ({
  transform: `translate(${props.node.position.x}px, ${props.node.position.y}px)`,
}));

let isDragging = false;
let startX = 0;
let startY = 0;

const startDrag = (event: MouseEvent) => {
  isDragging = true;
  startX = event.clientX - props.node.position.x;
  startY = event.clientY - props.node.position.y;
  
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
};

const onDrag = (event: MouseEvent) => {
  if (!isDragging) return;
  
  const newX = event.clientX - startX;
  const newY = event.clientY - startY;
  
  emit('nodeMove', props.node.id, newX, newY);
};

const stopDrag = () => {
  isDragging = false;
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
};

const startPortDrag = (portId: string, isInput: boolean) => {
  console.log('Node port drag start:', { nodeId: props.node.id, portId, isInput });
  emit('portDragStart', props.node.id, portId, isInput);
};

const hoveredPort = ref<{ id: string; isInput: boolean } | null>(null);

const handlePortMouseOver = (portId: string, isInput: boolean) => {
  hoveredPort.value = { id: portId, isInput };
};

const handlePortMouseLeave = () => {
  hoveredPort.value = null;
};

const endPortDrag = (portId: string, isInput: boolean) => {
  console.log('Node port drag end:', { nodeId: props.node.id, portId, isInput });
  emit('portDragEnd', props.node.id, portId, isInput);
};
</script>

<style scoped>
.flow-node {
  position: absolute;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: move;
  user-select: none;
  min-width: 200px;
}

.node-header {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  border-radius: 4px 4px 0 0;
  min-height: 32px;
  position: relative;
}

.header-inputs, .header-outputs {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
}

.header-inputs {
  left: -6px; /* 调整为端点半径的负值，使中心点位于边缘 */
}

.header-outputs {
  right: -6px; /* 调整为端点半径的负值，使中心点位于边缘 */
}

.port {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.port-dot {
  width: 6px;
  height: 6px;
  background: #b1b1b7;
  border-radius: 50%;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.port:hover .port-dot {
  transform: scale(1.2);
  background: #666;
}

.node-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  margin: 0 20px;
}

.node-content {
  padding: 8px;
  min-height: 40px;
}

.node-default-content {
  font-size: 12px;
  color: #666;
}
</style> 